<template>
	<view class="fun-flex-col page">
		<uni-nav-bar background-color="#F6F6F6" leftWidth="60rpx" rightWidth="0rpx" status-bar left-icon="left" :fixed="true" :border="false" @clickLeft='back'>
			<block slot="default">
				<div class="nav-bar">
					<view class="title">{{orderInfo.productName}}</view>
					<view class="sub">Order No. :{{orderInfo.orderNo}}</view>
				</div>
			</block>
		</uni-nav-bar>

		<view class="page-co">
			<view class="detail">
				<view class="content">
					<view class="fun-flex-row fun-items-center fun-justify-center product-val">
						<text class="money">{{orderInfo.presentprice}}</text>
						<text class="status">Status: Holding</text>
					</view>
					
					<view class="pre-fee">Pre-fee Value ($)</view>
					
					<view class="fun-flex-row fun-justify-between fun-items-start equal-division">
						<view class="fun-flex-col fun-items-center equal-division-item">
							<text class="title">Principal</text>
							<text class="title-value fun-mt-8">{{orderInfo.seedmoney}}</text>
						</view>
						
						<view class="fun-flex-col fun-items-center equal-division-item">
							<text class="title">Yesterday’s Return</text>
							<text class="title-value fun-mt-8" :class="orderInfo.yesterdayProfit < 0 ? 'fall-text' : 'rise-text'">{{orderInfo.yesterdayProfit}}</text>
						</view>
						
						<view class="fun-flex-col fun-items-center equal-division-item">
							<text class="title">Cumulative Return</text>
							<text class="title-value fun-mt-8" :class="orderInfo.tradeprofit < 0 ? 'fall-text' : 'rise-text'">{{orderInfo.tradeprofit}}</text>
						</view>
					</view>
					
					
					<view class="purchase"> 
						<view class="fun-flex-row fun-items-center fun-justify-between">
							<text class="title">Purchase Date:{{UTILS.setDateFormat(orderInfo.buytime)}}</text>
							<text class="title-value">Leverage Ratio:1:{{orderInfo.leveragemultiplier}}</text>
						</view>
						
						<view class="fun-flex-row fun-items-center fun-justify-between second">
							<text class="title">Expiry Date:{{UTILS.setDateFormat(orderInfo.settlementdate)}}</text>
							<text class="title-value" :class="orderInfo.profitrate < 0 ? 'fall-text' : 'rise-text'">Holding Yiled:{{orderInfo.profitrate}}%</text>
						</view>
					</view>
					
					<view class="pro-tag" @click="toDetail">Product Details</view>
				</view>
			</view>
			
			<chart-area :chartData="chartData"></chart-area>
			
			<view class="table">
				<view class="fun-flex-row fun-justify-between fun-items-center head">
					<text class="line-one">Date</text>
					<text class="line-two">Transaction Amount</text>
					<text class="line-three">Trade Profit/Loss</text>
					<text class="line-four">No. of Trades</text>
				</view>
				
				<scroll-view  @scrolltolower="scrolltolower" scroll-y="true" enable-back-to-top="true" class="content">
					<view class="fun-flex-row fun-items-center fun-justify-between list" v-for="item in orderDayList" :key='item.dayId'>
						<view class="data line-one">{{UTILS.setDateFormat(item.date)}}</view>
						<text class="list-two line-two">${{item.tradingAmount}}</text>
						<view class="fun-flex-col fun-items-center list-three line-three">
							<text class="amount" :class="item.profit < 0 ? 'fall-text' : 'rise-text'">{{removeMinusSign(item.profit)}}</text>
							<view class="fun-flex-row fun-items-center fun-justify-between amount-box" :class="item.profitRate < 0 ? 'fall-box' : 'rise-box'">
								<image src="@/static/common/fall.png" v-if='item.profitRate < 0'></image>
								<image src="@/static/common/rise.png" v-else />
								<text :class="item.profitRate < 0 ? 'fall-text' : 'rise-text'">{{item.profitRate}}%</text>
							</view>
						</view>
						<view class="list-four fun-flex-row fun-items-center fun-justify-center line-four" @click="toTradeDetail(item)">
							{{item.tradingNumber}}
							<image src="@/static/common/arrow_right_black.png"/>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		
		<view class="fun-flex-row fun-justify-between fun-items-center btn-wrap">
			<view class="more" @click="toProduct">Explore More</view>
			<view class="add" @click="purchase">Additional Purchase</view>
		</view>
	</view>
</template>

<script>
	import {getTimeZone,removeMinusSign,roundToDecimal} from "@/common/js/func.js"
	import {holdingsDetail,holdOrderDayList} from "@/api/home.js"
	import chartArea from "@/components/chartArea.vue"
	export default {
		data() {
			return {
				queryData:{
					orderId:"",
					timeZone:8
				},
				queryList:{
					orderId:"",
					page:1,
					limit:10,
				},
				orderDayList:[],
				total:0,
				orderInfo:{},
				chartData:{},
				orderNo:"",
				removeMinusSign
			};
		},

		onLoad(option) {
			this.queryData.timeZone = getTimeZone() || 8;
			this.orderNo = decodeURIComponent(option.orderNo) || "";
			this.queryData.orderId = this.UTILS.stringToNum(decodeURIComponent(option.orderId)) || null;
			this.queryList.orderId = this.queryData.orderId;
			this.getHoldingsDetail();
			this.getHoldOrderDayList()
		},

		methods: {
			getHoldingsDetail(){
				holdingsDetail(this.queryData).then(res => {
					if(res.code == 0){
						this.orderInfo = res.data || {};
						this.chartData = {
							"categories": res.data?.linechart.map(ele => ele.name.slice(-5).replace("-","/")) || [],
							"series": [{
								"name": "Pre fee value",
								"data": res.data?.linechart.map(ele => roundToDecimal(ele.value)) || [],
								"legendShape":"circle",
								"dataPointShapeType":"hollow",
								"addPoint":true
							}]
						}
					}
					else{
						this.UTILS.logStr(res.msg || "Failed to retrieve data")
					}
				})
			},
			getHoldOrderDayList(){
				holdOrderDayList(this.queryList).then(res => {
					if(res.code == 0){
						this.orderDayList = this.orderDayList?.concat(res?.data || []) || [];
						this.total = res.count;
					}
					else{
						this.UTILS.logStr(res.msg || "Failed to retrieve data")
					}
				})
			},
			
			toTradeDetail(item){
				if(item.tradingdata == 2){
					const query = {
						dayId:encodeURIComponent(item.dayId),
						orderId:encodeURIComponent(this.queryData.orderId),
						orderNo: encodeURIComponent(this.orderNo),
						productName:encodeURIComponent(this.orderInfo.productName)
					}
					uni.navigateTo({url:`/pages/home/seeMore?query=${JSON.stringify(query)}`})
				}
				else{
					if(item.tradingdata == 0){
						this.UTILS.logStr("此产品不提供交易明细");
						return
					}
					if(item.tradingdata == 1){
						this.UTILS.logStr("数据正在同步");
						return
					}
				}
			},
			
			// 触底加载更多
			scrolltolower(){
				if (this.total > this.orderDayList.length) {
					this.queryList.page++;
					this.getHoldOrderDayList();
				}
			},
			
			toDetail(){
				uni.navigateTo({url:'/pages/products/productDetail?pid='+this.orderInfo.productId+'&name='+this.orderInfo.productName})
			},
			
			toProduct(){
				uni.switchTab({url:'/pages/products/index'})
			},
			purchase(){
				uni.navigateTo({url:'/pages/products/buy?pid='+this.orderInfo.productId + '&minimumAmount='+this.orderInfo.productMinAmount+'&title='+this.orderInfo.productName})
			},
			back(){
				uni.navigateBack({
					delta: 1
				});
			}
		},
		components:{
			chartArea
		}
	};
</script>

<style scoped lang="scss">
	.mt-25 {
		margin-top: 50rpx;
	}
	.ml-5 {
		margin-left: 10rpx;
	}
	.page {
		padding-bottom: 32rpx;
		background-color: #ffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
		.nav-bar{
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			.title{
				font-size: 32rpx;
				width: 100%;
				text-align: center;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			.sub{
				width: 100%;
				text-align: center;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				font-size: 24rpx;
				color: #7F7F7F;
			}
		}
		.page-co{
			height: calc(100% - 45px);
			overflow: auto;
			padding-top: 48rpx;
			.detail {
				padding: 0 32rpx;
				.content{
					position: relative;
					padding: 70rpx 24rpx 32rpx 24rpx;
					background: #FFFFFF;
					border-radius: 16rpx;
					border: 2rpx solid #F0F0F0;
				}
				.product-val {
					.money{
						font-weight: bold;
						font-size: 48rpx;
						color: #000000;
					}
					.status {
						margin-left: 16rpx;
						padding: 8rpx;
						border-radius: 4rpx;
						background: #E9FAF0;
						font-size: 10px;
						color: #51844D;
					}
				}
				.pre-fee {
					text-align: center;
					color: #000000;
					font-size: 24rpx;
					margin-top: 12rpx;
					margin-bottom: 36rpx;
				}
				.pro-tag{
					position: absolute;
					top:0;
					right: 0;
					background: #1A7B99;
					border-radius: 0px 16rpx 0px 16rpx;
					padding: 12rpx 18rpx;
					font-size: 24rpx;
					color: #FFFFFF;
					opacity: 0.5;
				}
			}
			.equal-division {
				.equal-division-item {
					.title{
						font-size: 12px;
					}
					.title-value{
						font-weight: bold;
						font-size: 28rpx;
					}
					.font_3 {
						font-size: 32rpx;
						font-weight: 700;
						color: #51844d;
					}
				}
			}
			.purchase{
				margin-top: 28rpx;
				font-size: 24rpx;
				color: #333333;
				.second{
					margin-top: 16rpx;
				}
			}
			
			.font {
				font-size: 24rpx;
				font-family: SF Pro Display;
			}
			
			.group_7 {
				margin-top: 64rpx;
				padding-left: 32rpx;
				padding-right: 24rpx;
				.legend {
					width: 16rpx;
					height: 16rpx;
					background: #60D29B;
					box-shadow: 0px 4rpx 8rpx 0px rgba(68,68,79,0.15);
					border-radius: 50%
				}
			
				.text_9 {
					color: #7f7f7f;
				}
			
				.group_8 {
					margin-top: 28rpx;
			
					.font_4 {
						font-size: 24rpx;
						font-family: SF Pro Display;
						color: #808d9e;
					}
			
					.text_10 {
						margin-top: 12rpx;
					}
			
					.group_9 {
						padding: 16rpx 0 40rpx;
						.text-wrapper_2 {
							padding: 20rpx 0;
							background-color: #ffffff;
							border-radius: 24rpx 24rpx 24rpx 0rpx;
							box-shadow: 0rpx 8rpx 44rpx #9fa3b740;
							width: 134rpx;
			
							.text_11 {
								color: #1d1d25;
							}
						}
			
						.pos_3 {
							position: absolute;
							left: 50%;
							top: 0;
							transform: translateX(-50%);
						}
					}
					.group_12 {
						padding-left: 12rpx;
					}
			
					.group_10 {
						border-bottom: dotted 4rpx #e9ecf2;
			
						.section_3 {
							margin-left: 204rpx;
							background-color: #60d39c;
							border-radius: 14rpx;
							box-shadow: 0rpx 4rpx 8rpx #44444f26;
							width: 28rpx;
							height: 28rpx;
							border: solid 4rpx #ffffff;
						}
			
						.group_11 {
							margin-top: -10rpx;
							padding: 8rpx 0 56rpx;
			
							.view {
								margin-top: 62rpx;
							}
			
							.view_2 {
								margin-top: 62rpx;
							}
			
							.view_3 {
								margin-top: 62rpx;
							}
			
							.view_4 {
								margin-top: 62rpx;
							}
						}
					}
			
					.divider {
						height: 4rpx;
						border-left: dotted 2rpx #e9ecf2;
						border-right: dotted 2rpx #e9ecf2;
						border-top: dotted 2rpx #e9ecf2;
						border-bottom: dotted 2rpx #e9ecf2;
					}
				}
			
				.group_13 {
					margin-top: 20rpx;
					padding-left: 116rpx;
			
					.text-wrapper_3 {
						width: 50rpx;
					}
				}
			
				.font_6 {
					font-size: 24rpx;
					font-family: Inter;
					color: #808d9e;
				}
				.font_5 {
					font-size: 24rpx;
					font-family: SF Pro Display;
					color: #000000;
				}	
			}
			
			.table{
				margin-top: 20rpx;
				margin-bottom: 80rpx;
				padding: 0 32rpx;
				.line-one{
					flex: 0.1;
					text-align: left;
					word-break: break-word;
					overflow-wrap: break-word;
				}
				.line-two{
					flex: 0.3;
				}
				.line-three{
					flex: 0.3;
				}
				.line-four{
					flex: 0.3;
				}
				.head {
					font-weight: 500;
					font-size: 24rpx;
					margin-top: 40rpx;
					text-align: center;
					height: 80rpx;
				}
				.content {
					max-height: 350px;
					.list{
						font-weight: 500;
						font-size: 24rpx;
						// height: 80rpx;
						.list-two{
							text-align: center;
						}
						.list-three{
							color:#51844D;
							line-height: 32rpx;
							.amount-box{
								margin-top: 8rpx;
								border-radius: 10rpx;
								padding: 4rpx 12rpx;
								image{
									width: 24rpx;
									height: 24rpx;
									margin-right: 8rpx;
								}
							}
						}
						
						.list-four{
							image{
								width: 24rpx;
								height:24rpx;
								margin-left:44rpx
							}
						}
					}
					.list:not(:last-child){
						margin-bottom: 16rpx;
					}
				}
			}
		}
		
		.btn-wrap{
			padding: 0 32rpx;
			color: #ffffff;
			text-align: center;
			.more {
				width: 49%;
				padding: 24rpx 0;
				background-color: #ffffff;
				border-radius: 10rpx;
				border: solid 2rpx #1a7b99;
				color: #1a7b99;
				font-weight: bold;
			}
			
			.add {
				width: 49%;
				padding: 24rpx 0;
				background-color: #1a7b99;
				border-radius: 10rpx;
				color: #ffffff;
				font-weight: bold;
				
			}
		}
	}
</style>